<template>
	<view class="wrap">
		<view class="user-info">
			<view class="left">
				<img :src="img" alt="">
				<text class="name" @click="tologin">{{name}}</text>
			</view>
			<view class="right" @click="updateuserinfo">
				<van-icon name="edit" />
				<text>修改资料</text>
			</view>
		</view>
		<view class="all">
			<view class="mydeliver" @click="mydeliver">
				<img src="../../static/help.png" alt="">
				<text>我的领养</text>
			</view>
			<view class="mysend" @click="mysend">
				<img src="../../static/gongyi.png" alt="">
				<text>我的送养</text>
			</view>
		</view>
		<view class="to">
			<view class="card" @click="toorder">
				<view class="left1">
					<img src="../../static/bill.png" alt="">
					<text>我的订单</text>
				</view>
				<view class="right">
					<van-icon name="arrow" />
				</view>
			</view>
			<view class="card" @click="toaddress">
				<view class="left1">
					<img src="../../static/address.png" alt="">
					<text>收货地址</text>
				</view>
				<view class="right">
					<van-icon name="arrow" />
				</view>
			</view>
			<view class="card">
				<view class="left1">
					<img src="../../static/exit.png" alt="">
					<text @click="exit">退出登录</text>
				</view>
				<view class="right">
					<van-icon name="arrow" />
				</view>
			</view>
		</view>
		<view class="call">
			<view class="item">
				<text>领养咨询：</text>
				<van-tag round type="primary" size="medium" color="#fe9b23">联系我</van-tag>
			</view>
			<view class="item">
				<text>工作时间：周一至周五09:00-18:00</text>
			</view>
			<van-divider :style="{ color: 'grey', borderColor: '#fe9b23', padding: '0 16px' }">让每一个流浪毛孩都有家</van-divider>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	import {
		showSuccessToast
	} from 'vant';
	const store = useStore()
	let img = ref('../../static/logo.png')
	let name = ref('未登录')

	function exit() { //点击退出
		store.commit('uploadLogin', false) //清除登录状态
		uni.clearStorageSync('token')
		store.commit('uploadUserinfo', '') //清空用户信息
		showSuccessToast('退出成功')
		img.value = '../../static/logo.png'
		name.value = '未登录'
	}

	function mydeliver() { //跳转到我的领养页面
		let login = computed(() => store.state.login)
		if (!login.value) { //如果未登录
			return
		}
		uni.navigateTo({
			url: '/pages/mydeliver/mydeliver'
		})
	}

	function mysend() { //跳转到我的送养页面
		let login = computed(() => store.state.login)
		if (!login.value) { //如果未登录
			return
		}
		uni.navigateTo({
			url: '/pages/mysend/mysend'
		})
	}

	function toaddress() { //跳转到地址列表
		let login = computed(() => store.state.login)
		if (!login.value) { //如果未登录
			return
		}
		uni.navigateTo({
			url: '/pages/addrlist/addrlist'
		})
	}

	function toorder() { //跳转到订单页面 
		let login = computed(() => store.state.login)
		if (!login.value) { //如果未登录
			return
		}
		uni.navigateTo({
			url: '/pages/myorders/myorders'
		})
	}

	function updateuserinfo() { //修改个人信息
		let login = computed(() => store.state.login)
		if (!login.value) { //如果未登录
			return
		}
		uni.navigateTo({
			url: '/pages/updateuserinfo/updateuserinfo'
		})
	}

	function tologin() {
		let login = computed(() => store.state.login)
		if (!login.value) { //如果未登录
			uni.showModal({
				content: '尚未登录，是否立即登录？',
				confirmText: '立即登录',
				success: res => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
	// 刚进来读取vuex里面的登录状态，如果没有登录，就弹框提示并跳转到登录页面
	onLoad(() => {
		let login = computed(() => store.state.login)
		if (!login.value) { //如果登录状态为未登录，跳转到登录页面
			uni.showModal({
				content: '尚未登录，是否立即登录？',
				confirmText: '立即登录',
				success: res => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	})
	onShow(() => {
		let login = computed(() => store.state.login)
		if (login.value) {
			console.log('111')
			let data = computed(() => store.state.userinfo)
			console.log(data + '222')
			img.value = data.value.userAvatar
			name.value = data.value.userName
		}
	})
</script>

<style scoped>
	.call {
		margin-top: 160rpx;
	}

	.item {
		width: 100vw;
		text-align: center;
		margin: 40rpx 0;
	}

	.item text {
		font-size: 26rpx;
		color: gray;
	}

	.to {
		width: calc(100vw - 40rpx);
		/* height: 140rpx; */
		box-sizing: border-box;
		margin: 20rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		flex-wrap: wrap;
	}

	.left1 {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left1 img {
		width: 50rpx;
		height: 50rpx;
	}

	.card {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.all {
		width: calc(100vw - 40rpx);
		height: 140rpx;
		box-sizing: border-box;
		margin: 20rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.all img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}

	.mydeliver,
	.mysend {
		width: 350rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrap {
		width: 100vw;
		height: calc(100vh - 50px);
		overflow-y: scroll;
		padding-bottom: 50px;
		background-color: #f7f7f7;
		position: relative;
	}

	.user-info {
		width: 100vw;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 0 0 40rpx 40rpx;
	}

	.left {
		width: 280rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>